<template>
  <div>
    <div>
      <el-form ref="messageForm" :model="messageForm" label-width="80px" :inline="true">
        <el-form-item label="所属楼栋">
          <el-input v-model="messageForm.build"></el-input>
        </el-form-item>
        <el-form-item label="所属楼层">
          <el-input v-model="messageForm.louceng"></el-input>
        </el-form-item>
        <el-form-item label="房间号">
          <el-input v-model="messageForm.number"></el-input>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="sel('messageForm')">搜索</el-button>

      </el-form>

    </div>
    <el-header>
      <el-link>
        <el-button type="primary" @click="dialogVisible = true" icon="el-icon-circle-plus-outline">添加</el-button>
      </el-link>
    </el-header>
    <div style="height: 900px">
      <el-dialog
        title="添加"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form style="width: 40% " :model="messageForm" ref="messageForm" label-width="150px" class="demo-ruleForm">
          <el-form-item label="房号" prop="number">
            <el-input v-model="messageForm.number"></el-input>
          </el-form-item>
          <el-form-item label="所属楼栋" prop="build">
            <el-input v-model="messageForm.build"></el-input>
          </el-form-item>
          <el-form-item label="所属楼层" prop="louceng">
            <el-input v-model="messageForm.louceng"></el-input>
          </el-form-item>
          <el-form-item label="水表号" prop="wmeter">
            <el-input v-model="messageForm.wmeter"></el-input>
          </el-form-item>
          <el-form-item label="水表位置" prop="wlocation">
            <el-input v-model="messageForm.wlocation"></el-input>
          </el-form-item>
          <el-form-item label="电表号" prop="emeter">
            <el-input v-model="messageForm.emeter"></el-input>
          </el-form-item>
          <el-form-item label="电表位置" prop="elocation">
            <el-input v-model="messageForm.elocation"></el-input>
          </el-form-item>
          <el-form-item label="实测面积" prop="area">
            <el-input v-model="messageForm.area"></el-input>
          </el-form-item>
          <el-form-item label="物业费收费面积" prop="carea">
            <el-input v-model="messageForm.carea"></el-input>
          </el-form-item>
          <el-form-item label="房屋状态" prop="state">
            <el-input v-model="messageForm.state"></el-input>
          </el-form-item>
          <el-form-item label="物业费承担情况" prop="sit">
            <el-input v-model="messageForm.sit"></el-input>
          </el-form-item>
          <el-form-item label="交房时间" prop="intime">
            <el-input v-model="messageForm.intime"></el-input>
          </el-form-item>
          <el-form-item label="收房时间" prop="totime">
            <el-input v-model="messageForm.totime"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('messageForm')">确 定</el-button>
  </span>

      </el-dialog>

      <el-table
        :data="users"
        style="width: 100% "
      >
        <el-table-column
          prop="id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="number"
          label="房号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="build"
          label="所属楼栋"
          width="180">
        </el-table-column>
        <el-table-column
          prop="louceng"
          label="所属楼层"
          width="180">
        </el-table-column>
        <el-table-column
          prop="wmeter"
          label="水表号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="wlocation"
          label="水表位置"
          width="180">
        </el-table-column>
        <el-table-column
          prop="emeter"
          label="电表号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="elocation"
          label="电表位置"
          width="180">
        </el-table-column>
        <el-table-column
          prop="area"
          label="实测面积"
          width="180">
        </el-table-column>
        <el-table-column
          prop="carea"
          label="物业费收费面积"
          width="180">
        </el-table-column>
        <el-table-column
          prop="state"
          label="房屋状态"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sit"
          label="物业费承担情况"
          width="180">
        </el-table-column>
        <el-table-column
          prop="intime"
          label="交房时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="totime"
          label="收房时间"
          width="180">
        </el-table-column>

        <el-table-column
          label="操作" height="100px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="del(scope.row.id)"
            >删除
            </el-button>
            <el-button type="primary" icon="el-icon-edit-outline" @click="edit(scope.row)" plain>编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginations.page_index"
            :page-sizes="paginations.page_sizes"
            :page-size="paginations.page_size"
            :layout="paginations.layout"
            :total="paginations.total">
          </el-pagination>
        </div>
        <el-dialog
          title="编辑"
          :visible.sync="updateDialogVisible"
          width="30%"
        >
          <el-form style="width: 40%" :model="messageForm" ref="messageForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="房号" prop="number">
              <el-input v-model="messageForm.number" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="所属楼栋" prop="build">
              <el-input v-model="messageForm.build"></el-input>
            </el-form-item>
            <el-form-item label="所属楼层" prop="louceng">
              <el-input v-model="messageForm.louceng"></el-input>
            </el-form-item>
            <el-form-item label="水表号" prop="wmeter">
              <el-input v-model="messageForm.wmeter"></el-input>
            </el-form-item>
            <el-form-item label="水表位置" prop="wlocation">
              <el-input v-model="messageForm.wlocation"></el-input>
            </el-form-item>
            <el-form-item label="电表号" prop="emeter">
              <el-input v-model="messageForm.emeter"></el-input>
            </el-form-item>
            <el-form-item label="电表位置" prop="elocation">
              <el-input v-model="messageForm.elocation"></el-input>
            </el-form-item>
            <el-form-item label="实测面积" prop="area">
              <el-input v-model="messageForm.area"></el-input>
            </el-form-item>
            <el-form-item label="物业费收费面积" prop="carea">
              <el-input v-model="messageForm.carea"></el-input>
            </el-form-item>
            <el-form-item label="房屋状态" prop="state">
              <el-input v-model="messageForm.state"></el-input>
            </el-form-item>
            <el-form-item label="物业费承担情况" prop="sit">
              <el-input v-model="messageForm.sit"></el-input>
            </el-form-item>
            <el-form-item label="交房时间" prop="intime">
              <el-input v-model="messageForm.intime"></el-input>
            </el-form-item>
            <el-form-item label="收房时间" prop="totime">
              <el-input v-model="messageForm.totime"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="updateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="update(messageForm)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'fangwu',
  inject: ['reload'],
  data () {
    return {
      msg: 'hello world',
      users: [],
      updateDialogVisible: false,
      allTableData: [],
      json_fields: {
        id: 'id',
        房间号: 'number',
        所属楼栋: 'build',
        所属楼层: 'louceng',
        水表号: 'wmeter',
        水表位置: 'wlocation',
        电表号: 'emeter',
        电表位置: 'elocation',
        实测面积: 'area',
        物业费收费面积: 'carea',
        房屋状态: 'state',
        物业承担情况: 'sit',
        交房时间: 'intime',
        收房时间: 'totime'
      },
      messageForm: {
        number: '',
        build: '',
        louceng: '',
        wmeter: '',
        wlocation: '',
        emeter: '',
        elocation: '',
        area: '',
        carea: '',
        state: '',
        sit: '',
        intime: '',
        totime: ''
      },
      messageForm1: {
        id: '',
        number: '',
        build: '',
        louceng: '',
        wmeter: '',
        wlocation: '',
        emeter: '',
        elocation: '',
        area: '',
        carea: '',
        state: '',
        sit: '',
        intime: '',
        totime: ''
      },
      formLabelWidth: '120px',
      dialogVisible: false,
      input: {},
      paginations: {
        page_index: 1, // 当前页
        total: 0, // 总数
        page_size: 5, // 一页显示多少
        page_sizes: [4, 8, 12, 16], // 每页显示多少条
        layout: 'total, sizes, prev, pager, next, jumper'
      }
    }
  },
  mounted () {
    this.lists()
  },
  methods: {
    async lists () {
      const { data } = await this.$axios.get('http://localhost:8001/home/list/')
      this.allTableData = data
      this.setPaginations1()
    },
    async del (oid) {
      const confirmResult = await this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消')
      }
      this.$axios.post('http://localhost:8001/home/del?id=' + oid)
      this.reload()
    },
    submitForm (querystring) {
      var qs = require('querystring')
      this.$axios.post('http://localhost:8001/home/add', qs.stringify(this.messageForm))
      this.reload()
    },
    edit (messageForm) {
      this.messageForm = messageForm
      this.updateDialogVisible = true
    },
    update () {
      var qs = require('querystring')
      this.$axios.post('http://localhost:8001/home/update', qs.stringify(this.messageForm))
      this.reload()
    },
    sel (messageForm) {
      var qs = require('querystring')
      const that = this
      this.$axios.post('http://localhost:8001/home/selectlike', qs.stringify(this.messageForm))
        .then(function (response) {
          that.users = response.data
        })
    },
    setPaginations1 () {
      const that = this
      this.paginations.total = this.allTableData.length // 数据的数量
      this.paginations.page_index = 1 // 默认显示第一页
      this.paginations.page_size = 4 // 每页显示多少数据
      // 显示数据
      that.users = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size
      })
    },
    handleSizeChange (pagesize) {
      const that = this
      this.paginations.page_index = 1 // 第一页
      this.paginations.page_size = pagesize // 每页先显示多少数据
      that.users = this.allTableData.filter((item, index) => {
        return index < pagesize
      })
    },
    handleCurrentChange (page) {
      // 跳转页数
      // 获取当前页
      const index = this.paginations.page_size * (page - 1)
      // 获取总数
      const allData = this.paginations.page_size * page

      const tablist = []
      const that = this
      for (let i = index; i < allData; i++) {
        if (this.allTableData[i]) {
          tablist.push(this.allTableData[i])
        }
        that.users = tablist
      }
    }
  }
}
</script>

<style scoped>
  .page {
    float: right;
    margin-top: 20px;
  }
</style>
